<template>
  <div class="container">
    <div class="nav">
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="/admin/main">后台首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in navList" :key="index">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-button v-if="showAdd" size="mini" type="primary" @click="add">{{ btnText }}</el-button>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
export default {
  name: 'xwPagenav',
  props: {
    btnText: {
      type: String,
      default: '添加信息'
    },
    showAdd: {
      type: Boolean,
      default: true
    }
  },
  // 它可以共享为一份，全局，点击到对应的页面时，它就是对应页面的数据就可以
  // 全局共享 --> vuex
  computed: {
    navList() {
      return this.$store.getters.navList
    }
  },
  methods: {
    add() {
      this.$emit('update:visible', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  > div:nth-of-type(2) {
    font-size: 14px;
    color: rgb(96, 98, 102);
    cursor: pointer;
    &:hover {
      color: red;
    }
  }
}
</style>
